<template>
    <div class="home">
        <el-container>
            <el-header>
                <Header />
            </el-header>
            <el-container>
                <el-aside :width="menuStore.Collapse ? '64px' : '250px'">
                    <Aside />
                </el-aside>
                <el-main>
                    <Breadcrumb class="breadcrumbs" />
                    <RouterView />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import Aside from './components/aside.vue'
import Header from './components/header.vue'
import { useMenu } from '@/store/menu'
import Breadcrumb from '@/components/Breadcrumb.vue'
const menuStore = useMenu();
</script>

<style lang="less" scoped>
.home {
    height: 100%;

    :deep(.el-header) {
        height: 70px;
        background-color: #409eff;
    }

    :deep(.el-menu) {
        border-right: 0px
    }

    :deep(.el-aside) {
        height: calc(100vh - 70px);
        background-color: #304156;
        overflow: hidden;

        &::-webkit-scrollbar {
            width: 0;
            // overflow: hidden;
        }

        transition: width 0.3s;
        -webkit-transition: width 0.3s;
    }

    :deep(.el-main) {
        height: calc(100vh - 70px);
    }

    // .breadcrumbs {
    //     position: absolute;
    //     width: 100vw;
    //     border-bottom: 1px solid #000;
    //     background-color: #fff;
    //     z-index: 99;
    // }

}
</style>